<template>
  <el-container id="containerdiv">
    <el-header>
      <img :src="imgUrl" class="imgSize" />
      <div class="words">家庭财务管理系统</div>
      <el-badge :value="12" class="item2">
        <el-button type="warning" @click="showmemorandum">重要事件</el-button>
      </el-badge>
      <el-badge class="item">
        <el-button class="share-button" @click="outLogin">退出</el-button>
      </el-badge>
    </el-header>

    <el-container>
      <el-aside width="200px">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              background-color="#dadada"
              text-color="#fff"
              active-text-color="#409eff"
              @select="changetableMethod"
            >
              <el-menu-item index="1">
                <i class="el-icon-setting"></i>
                <span slot="title">账号管理</span>
              </el-menu-item>
              <el-menu-item index="2">
                <i class="el-icon-setting"></i>
                <span slot="title">收入管理</span>
              </el-menu-item>
              <el-menu-item index="3">
                <i class="el-icon-setting"></i>
                <span slot="title">支出管理</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-search"></i>
                <span slot="title">理财统计</span>
              </el-menu-item>
              <el-menu-item index="5">
                <i class="el-icon-picture"></i>
                <span slot="title">图表展示</span>
              </el-menu-item>
              <el-menu-item index="6">
                <i class="el-icon-s-order"></i>
                <span slot="title">重要事件</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <div class="account" v-if="account">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>账号管理</el-breadcrumb-item>
          </el-breadcrumb>
          <el-table :data="tableData1" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column label="账号" width="180">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.name"
                  placeholder="请输入内容"
                  :disabled="scope.row.disable"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="姓名" width="180">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.truename"
                  placeholder="请输入内容"
                  :disabled="scope.row.disable"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="密码" width="180">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.password"
                  placeholder="请输入内容"
                  :disabled="scope.row.disable"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="创建日期" width="200">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.createtime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="修改日期" width="200">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.updatetime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  v-if="scope.row.disable"
                >编辑</el-button>
                <el-button
                  size="mini"
                  @click="handleSave(scope.$index, scope.row)"
                  v-if="!scope.row.disable"
                  type="primary"
                >保存</el-button>
                <el-button size="mini" @click="dialogFormVisible = true;getFamilyNameMethod()">加入家庭</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog title="家庭成员" :visible.sync="dialogFormVisible">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="家庭成员登录账号">
                <el-input v-model="formInline.user" placeholder="家庭成员登录账号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addfamily">添加</el-button>
              </el-form-item>
            </el-form>

            <el-table :data="familyData" style="width: 100%">
              <el-table-column prop="name" label="家庭成员登录账号" width="280"></el-table-column>
              <el-table-column prop="truename" label="姓名" width="280"></el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button @click="DeletefamilyData(scope.row)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>
        </div>

        <div class="income" v-if="income">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>收入管理</el-breadcrumb-item>
          </el-breadcrumb>
          <el-button type="primary" size="medium" round @click="incomeAdd(1)">添加</el-button>
          <el-switch
            class="myswith"
            v-model="isfamily"
            active-text="家庭收入"
            inactive-text="个人收入"
            @change="changeIncom(1)"
          ></el-switch>
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column label="日期" width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="姓名" width="180">
              <template slot-scope="scope">
                <i class="el-icon-star-off"></i>
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="收入金额(元)" width="180">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  type="number"
                  v-model="scope.row.money"
                  placeholder="请输入内容"
                  :disabled="scope.row.disable"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="收入来源或者收入理由" width="280">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.source"
                  placeholder="请输入内容"
                  :disabled="scope.row.disable"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  v-if="scope.row.disable"
                >编 辑</el-button>
                <el-button
                  size="mini"
                  @click="handleSave(scope.$index, scope.row)"
                  v-if="!scope.row.disable"
                  type="primary"
                >保 存</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删 除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="expenditure" v-if="expenditure">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>支出管理</el-breadcrumb-item>
          </el-breadcrumb>
          <el-button type="primary" size="medium" round @click="incomeAdd(2)">添加</el-button>
          <el-switch
            class="myswith"
            v-model="isfamily"
            active-text="家庭支出"
            inactive-text="个人支出"
            @change="changeIncom(2)"
          ></el-switch>
          <el-table :data="tableData3" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column label="日期" width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>

            <el-table-column label="姓名" width="180">
              <template slot-scope="scope">
                <i class="el-icon-star-off"></i>
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column width="280" label="消费金额(元)">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  type="number"
                  v-model="scope.row.money"
                  placeholder="请输入消费金额"
                  :disabled="scope.row.disable"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="消费地址或消费原因">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.consumeraddress"
                  placeholder="请输入内容"
                  :disabled="scope.row.disable"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  v-if="scope.row.disable"
                >编辑</el-button>
                <el-button
                  size="mini"
                  @click="handleSave(scope.$index, scope.row)"
                  v-if="!scope.row.disable"
                  type="primary"
                >保存</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="statistical" v-if="statistical">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>理财统计</el-breadcrumb-item>
          </el-breadcrumb>

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="购买理财统计页面" name="first">
              <el-button
                class="paneButton"
                type="primary"
                size="medium"
                round
                @click="incomeAdd(3)"
              >添加</el-button>
              <el-switch
                class="myswith"
                v-model="isfamily"
                active-text="家庭理财"
                inactive-text="个人理财"
                @change="changeIncom(2)"
              ></el-switch>
              <el-table :data="tableData4" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column label="姓名" width="180">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="购买日期" width="300">
                  <template slot-scope="scope">
                    <el-date-picker
                      v-model="scope.row.datestart"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="pickerOptions1"
                      :disabled="scope.row.disable"
                    ></el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column label="到期日期" width="300">
                  <template slot-scope="scope">
                    <el-date-picker
                      v-model="scope.row.dateend"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="pickerOptions2"
                      :disabled="scope.row.disable"
                    ></el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column label="理财产品名称" width="180">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      v-model="scope.row.companyname"
                      placeholder="请输入内容"
                      :disabled="scope.row.disable"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column width="180" label="购买金额(元)">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      v-model="scope.row.money"
                      placeholder="请输入内容"
                      :disabled="scope.row.disable"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column width="180" label="预计本息和(元)">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      v-model="scope.row.principalinterest "
                      placeholder="请输入内容"
                      :disabled="scope.row.disable"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      v-if="scope.row.disable"
                    >编辑</el-button>
                    <el-button
                      size="mini"
                      @click="handleSave(scope.$index, scope.row)"
                      v-if="!scope.row.disable"
                      type="primary"
                    >保存</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="负债统计页面" name="second">
              <el-button
                class="paneButton"
                type="primary"
                size="medium"
                round
                @click="incomeAdd(4)"
              >添加</el-button>
              <el-switch
                class="myswith"
                v-model="isfamily"
                active-text="家庭负债"
                inactive-text="个人负债"
                @change="changeIncom(3)"
              ></el-switch>
              <el-table :data="tableData5" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column label="姓名" width="180">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="借款日期" width="280">
                  <template slot-scope="scope">
                    <el-date-picker
                      type="date"
                      style="margin-left: 10px"
                      :disabled="scope.row.disable"
                      v-model="scope.row.datestart"
                    ></el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column label="到期日期" width="280">
                  <template slot-scope="scope">
                    <el-date-picker
                      type="date"
                      style="margin-left: 10px"
                      :disabled="scope.row.disable"
                      v-model="scope.row.dateend"
                    ></el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column label="银行或者个人名称" width="180">
                  <template slot-scope="scope">
                    <i class="el-icon-star-off"></i>
                    <span style="margin-left: 10px">{{ scope.row.bankname }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="负债金额">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      v-model="scope.row.liabilitiesmoney"
                      placeholder="请输入内容"
                      :disabled="scope.row.disable"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="预计负债本息和">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      type="number"
                      v-model="scope.row.liabilitiestotal"
                      placeholder="请输入内容"
                      :disabled="scope.row.disable"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEditdebtStatistics(scope.$index, scope.row)"
                      v-if="scope.row.disable"
                    >编辑</el-button>
                    <el-button
                      size="mini"
                      @click="handleSavedebtStatistics(scope.$index, scope.row)"
                      v-if="!scope.row.disable"
                      type="primary"
                    >保存</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDeletedebtStatistics(scope.$index, scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!-- <el-tab-pane label="全面分析负债盈利等情况(图表展示)" name="third">
          
            </el-tab-pane>-->
          </el-tabs>
        </div>
        <div class="financial" v-if="financial">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>图表展示</el-breadcrumb-item>
          </el-breadcrumb>
          <MyEchart></MyEchart>
        </div>
        <div class="memorandum" v-if="memorandum">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>备忘录</el-breadcrumb-item>
          </el-breadcrumb>
          <el-button type="primary" @click="dialogmemorandumVisible = true" size="medium" round>添加</el-button>
          <el-switch
            class="myswith"
            v-model="isfamily"
            active-text="家庭纪要"
            inactive-text="个人纪要"
            @change="changeIncom(6)"
          ></el-switch>
          <el-table :data="tableData6" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column label="账号" width="180">
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.name" placeholder="家人的账号"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="完成度" width="180">
              <template slot-scope="scope">
                <el-select v-model="scope.row.filish" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="选择日期" width="500">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.time"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                ></el-date-picker>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template>
                <el-button size="mini"  type="info" plain @click="getmemorandumClear()">清 空</el-button>    
                 <el-button size="mini" type="primary" plain @click="dialogFormVisible = true;getmemorandumMethod()">查 询</el-button>                          
              </template>
            </el-table-column>
          </el-table>
          <template>
           
              <div
                v-for="(item,index) in mycount"
                :key="index"
                :title="item.name"
                :name="item.id"
              >        
              <div class="thistotal">
                   <div class="beatifulcolor" :style="{'background-color':item.color}"></div>
                   <div :style="{'color':item.color}" class="zhongyaoshijian">{{item.name}}</div>
                  <div :style="{'color':item.color}" class="zhongyaoshijian">{{item.detail}}</div>
                  
              </div> 
                 <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
              </div>
           
          </template>
          <el-dialog title="添加纪要" :visible.sync="dialogmemorandumVisible">
            <el-form  :model="memorandumform" label-width="80px">
              <el-form-item label="简要标题">
                <el-input v-model="memorandumform.name"></el-input>
              </el-form-item>
              <el-form-item label="选择时间">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="memorandumform.startdate"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                  <el-date-picker
                   type="date"
                    placeholder="选择日期"
                    v-model="memorandumform.enddate"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="是否重要">
               
                <el-checkbox v-model="memorandumform.importance" class="isimportant">是否重要</el-checkbox>
              </el-form-item>
              <el-form-item label="详情">
                <el-input type="textarea" v-model="memorandumform.detail"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogmemorandumVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogmemorandumVisible = false,adddmemorandum()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import API from "@/api/dictionary";
import store from "../store";
import axios from "axios";
const {
  updateUser,
  getUserName,
  addfamily,
  getFamilyName,
  deleteFamilyName,
  getincome,
  addincome,
  deleteIncome,
  getexpenditure,
  addexpenditure,
  deleteexpenditure,
  getstatistical,
  addstatistical,
  deletestatistical,
  getdebtStatistics,
  adddebtStatistics,
  deletedebtStatistics,
  getmemorandum,
  adddmemorandum,
  deletememorandum
} = API;
export default {
  data() {
    return {
      memorandumform: {
        name: "",
        startdate: "",
        enddate: "",
        importance: 'true',
        detail: "",
        isfinish:false
      },
      dialogmemorandumVisible: false,
      activeNames: ["1"],
      mycount: [
       
      ],
      note: {
        backgroundImage: "url(" + require("../assets/master.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% auto",
        marginTop: "5px"
      },
      isfamily: true,

      formInline: {
        user: ""
      },
      formLabelWidth: "120px",
      familyData: [],
      activeName: "first",
      dialogTableVisible: false,
      dialogFormVisible: false,
      imgUrl: require("../assets/resizeApi.png"),
      account: true,
      income: false,
      expenditure: false,
      statistical: false,
      financial: false,
      memorandum: false,
      changetable: "1",
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [
        {
          name: "",
          filish: "未完成",
          time: [],
        }
      ],
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "已完成",
          label: "已完成"
        },
        {
          value: "未完成",
          label: "未完成"
        }
      ],
      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      pickerOptions2: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  watch: {},
  mounted() {
    document.getElementById("containerdiv").style.height =
      window.innerHeight + "px";
    var name = this.$store.state.user.user;
    this.getUserName(name);
  },
  methods: {
    getmemorandumClear(){
      this.tableData6=[{
          name: "",
          filish: "未完成",
          time: '',        
        }];
    },

    getmemorandumMethod(){
        var temp=this.tableData6[0];
        var temfilish=false;
        
        if(temp.filish="未完成"){
        temfilish=false;
        }else if(temp.filish="已完成"){
        temfilish=true;
        }else{
        temfilish=null;
        }
       
      var    name=temp.name;
      var    isfinish=temfilish;
       var  startdate=temp.time[0];
       var   enddate=temp.time[1];
       
            console.log( startdate);
        axios({
                method: "GET",
                url: getmemorandum,
                params: 
                {
                name:name,
                isfinish:temfilish,
                startdate:startdate,
                enddate:enddate
                }
              }).then(response => {
                
           this.mycount=     response.data.data;

             console.log( this.mycount);

                }).catch(error => {
                  console.log("getdebtStatistics", error);
                });


    },
    adddmemorandum() {
    //  console.log( this.memorandumform );
        this.$axios({
        method: "Post",
        url: adddmemorandum,
        data: this.memorandumform,
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          if (res.data.data == "ok") {
            this.$message({
              message: "添加成功",
              type: "success"
            });
          }
        this.getmemorandumMethod();
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
     
    },
    //展开
    handleChange(val) {
      console.log(val);
    },

    //展示纪要页面
    showmemorandum() {
      this.$message({
        message: "还有未完成的重要事件，请速度完成，不可拖延",
        type: "warning"
      });
    },
    handleEditdebtStatistics(index, row) {
      this.tableData5[index].disable = false;
    },
    handleSavedebtStatistics(index, row) {
      this.tableData5[index].date = row.date;
      this.tableData5[index].disable = true;
      this.adddebtStatisticsMethod(index);
    },
    handleDeletedebtStatistics(index, row) {
      this.deletedebtStatisticslMethod(this.table5[index]);
    },
    handleSave(index, row) {
      if (this.changetable == "1") {
        this.tableData1[index].date = row.date;
        this.tableData1[index].disable = true;
        this.addAccount();
      }
      if (this.changetable == "2") {
        this.addIncome(index);
      }
      if (this.changetable == "3") {
        this.tableData3[index].date = row.date;
        this.tableData3[index].disable = true;
        this.addexpenditureMethod(index);
      }
      if (this.changetable == "4") {
        this.tableData4[index].date = row.date;
        this.tableData4[index].disable = true;
        this.addstatisticalMethod(index);
      }
    },
    handleDelete(index, row) {
      if (this.changetable == "1") {
        this.$delete(this.tableData1, index);
      }
      if (this.changetable == "2") {
        this.deleteIncome(this.tableData2[index]);
      }
      if (this.changetable == "3") {
        this.deleteexpenditureMethod(this.tableData3[index]);
      }
      if (this.changetable == "4") {
        this.deletestatisticalMethod(this.tableData4[index]);
      }
    },

    // ---------------------------------------------------------

    deletedebtStatisticslMethod(paramid) {
      axios({
        method: "POST",
        url: deletedebtStatistics,
        params: { id: paramid.id },
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          if (res.data.data === "ok") {
            this.$message({ message: "删除成功", type: "success" });
          }
          this.getdebtStatisticsMethod();
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
    },

    adddebtStatisticsMethod(index) {
      var statisticalList = this.tableData5[index];
      this.$axios({
        method: "Post",
        url: adddebtStatistics,
        data: statisticalList,
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          if (res.data.data == "ok") {
            this.$message({
              message: "添加成功",
              type: "success"
            });
          }
          this.getdebtStatisticsMethod();
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
    },
    getdebtStatisticsMethod() {
      axios({
        method: "GET",
        url: getdebtStatistics,
        params: { isfamily: this.isfamily }
      })
        .then(response => {
          this.tableData5 = response.data.data;
        })
        .catch(error => {
          console.log("getdebtStatistics", error);
        });
    },
    deletestatisticalMethod(paramid) {
      axios({
        method: "POST",
        url: deletestatistical,
        params: { id: paramid.id },
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          if (res.data.data === "ok") {
            this.$message({ message: "删除成功", type: "success" });
          }
          this.getexpenditureMethod();
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
    },

    addstatisticalMethod(index) {
      var statisticalList = this.tableData4[index];
      this.$axios({
        method: "Post",
        url: addstatistical,
        data: statisticalList,
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          if (res.data.data == "ok") {
            this.$message({
              message: "添加成功",
              type: "success"
            });
          }
          this.getstatisticalMethod();
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
    },
    deleteexpenditureMethod(paramid) {
      axios({
        method: "POST",
        url: deleteexpenditure,
        params: { id: paramid.id },
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          if (res.data.data === "ok") {
            this.$message({ message: "删除成功", type: "success" });
          }
          this.getstatisticalMethod();
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
    },
    addexpenditureMethod(index) {
      var expenditureList = this.tableData3[index];
      this.$axios({
        method: "Post",
        url: addexpenditure,
        data: expenditureList,
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          if (res.data.data == "ok") {
            this.$message({
              message: "添加成功",
              type: "success"
            });
          }
          this.getexpenditureMethod();
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
    },
    getstatisticalMethod() {
      axios({
        method: "GET",
        url: getstatistical,
        params: { isfamily: this.isfamily }
      })
        .then(response => {
          this.tableData4 = response.data.data;
        })
        .catch(error => {
          console.log("getexpenditure", error);
        });
    },
    getexpenditureMethod() {
      axios({
        method: "GET",
        url: getexpenditure,
        params: { isfamily: this.isfamily }
      })
        .then(response => {
          this.tableData3 = response.data.data;
        })
        .catch(error => {
          console.log("getexpenditure", error);
        });
    },
    changeIncom(index) {
      if (index === 1) {
        this.getincomeMethod();
      }
      if (index === 2) {
        this.getexpenditureMethod();
      }
      if (index === 3) {
        this.getdebtStatisticsMethod();
      }
    },
    addAccount() {
      var dataStart = this.tableData1[0];
      var dataEnd = {
        id: dataStart.id,
        name: dataStart.name,
        truename: dataStart.truename,
        password: dataStart.password,
        createtime: dataStart.createtime,
        updateTime: dataStart.updatetime,
        account: dataStart.name,
        disable: true
      };
      this.$axios({
        method: "POST",
        url: updateUser,
        data: dataEnd,
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          var name = this.$store.state.user.user;
          this.getUserName(name);
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
    },
    deleteIncome(paramid) {
      //组件中使用post方法
      axios({
        method: "POST",
        url: deleteIncome,
        params: { id: paramid.id },
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          if (res.data.data === "ok") {
            this.$message({ message: "删除成功", type: "success" });
          }
          this.getincomeMethod();
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
    },
    addIncome(index) {
      var incomeList = this.tableData2[index];
      this.$axios({
        method: "Post",
        url: addincome,
        data: incomeList,
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          if (res.data.data == "ok") {
            this.$message({
              message: "添加成功",
              type: "success"
            });
          }
          this.getincomeMethod();
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
    },
    getincomeMethod() {
      axios({
        method: "GET",
        url: getincome,
        params: { isfamily: this.isfamily }
      })
        .then(response => {
          this.tableData2 = response.data.data;
        })
        .catch(error => {
          console.log("getincome", error);
        });
    },
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.getstatisticalMethod();
      }
      if (tab.name == "second") {
        this.getdebtStatisticsMethod();
      }
      //  if(tab.name=='third'){
      //     this.getstatisticalMethod()
      // }
    },
    handleEdit(index, row) {
      if (this.changetable == "1") {
        this.tableData1[index].disable = false;
      }
      if (this.changetable == "2") {
        this.tableData2[index].disable = false;
      }
      if (this.changetable == "3") {
        this.tableData3[index].disable = false;
      }
      if (this.changetable == "4") {
        this.tableData4[index].disable = false;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    outLogin() {
      window.sessionStorage.removeItem("token");
      window.sessionStorage.removeItem("user");
      this.$router.push({ name: "logon" });
    },

    changetableMethod(key, keyPath) {
      this.changetable = key;
      if ("1" == key) {
        this.account = true;
        this.income = false;
        this.expenditure = false;
        this.statistical = false;
        this.financial = false;
        this.memorandum = false;
      }
      if ("2" == key) {
        this.account = false;
        this.income = true;
        this.expenditure = false;
        this.statistical = false;
        this.financial = false;
        this.memorandum = false;
        this.getincomeMethod();
      }
      if ("3" == key) {
        this.account = false;
        this.income = false;
        this.expenditure = true;
        this.statistical = false;
        this.financial = false;
        this.memorandum = false;
        this.getexpenditureMethod();
      }
      if ("4" == key) {
        this.account = false;
        this.income = false;
        this.expenditure = false;
        this.statistical = true;
        this.financial = false;
        this.memorandum = false;
        this.getstatisticalMethod();
      }
      if ("5" == key) {
        this.account = false;
        this.income = false;
        this.expenditure = false;
        this.statistical = false;
        this.financial = true;
        this.memorandum = false;
        this.getdebtStatisticsMethod();
      }
      if ("6" == key) {
        this.account = false;
        this.income = false;
        this.expenditure = false;
        this.statistical = false;
        this.financial = false;
        this.memorandum = true;
        this.getmemorandumMethod();
      }
    },
    DeletefamilyData(row) {
      this.$axios({
        method: "POST",
        url: deleteFamilyName,
        params: { name: row.name },
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          if (res.data.data == "ok") {
            this.$message({
              message: "删除成功",
              type: "success"
            });
          }
          this.getFamilyNameMethod();
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
    },

    getFamilyNameMethod() {
      axios({ method: "GET", url: getFamilyName })
        .then(response => {
          this.familyData = response.data.data;
          console.log(this.familyData);
        })
        .catch(error => {
          console.log("getFamilyName", error);
        });
    },
    addfamily() {
      this.$axios({
        method: "POST",
        url: addfamily,
        params: { name: this.formInline.user },
        headers: {
          "Content-Type": "application/json;charset=UTF-8" //指定消息格式
        }
      }).then(
        res => {
          if (res.data.data == "ok") {
            this.$message({
              message: "添加家庭成员成功",
              type: "success"
            });
          } else {
            this.$message({
              message: res.data.data,
              type: "success"
            });
          }
          this.getFamilyNameMethod();
        },
        res => {
          // 错误回调
          console.log("222");
        }
      );
    },
    getUserName(name) {
      this.$axios({
        method: "GET",
        url: getUserName,
        params: {
          name: name
        }
      })
        .then(response => {
          if (response.data.data != "false") {
            var table = response.data.data;
            this.tableData1 = [
              {
                id: table.id,
                name: table.name,
                truename: table.truename,
                password: table.password,
                createtime: table.createtime,
                updatetime: table.updatetime,
                account: table.name,
                disable: true
              }
            ];
          } else {
            alert("请重新登录");
            this.$router.push({ name: "logon" });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    incomeAdd(item) {
      var tableDataTemp = [];
      var getNowFormatDate = this.getNowFormatDate();
      if (item == 1) {
        tableDataTemp.push({
          date: getNowFormatDate,
          name: this.$store.state.user.truename,
          source: "",
          money: "",
          disable: false
        });
        this.tableData2.forEach(element => {
          tableDataTemp.push(element);
        });
        this.tableData2 = tableDataTemp;
      }
      if (item == 2) {
        var getNowFormatDate = this.getNowFormatDate();
        tableDataTemp.push({
          date: getNowFormatDate,
          name: this.$store.state.user.truename,
          money: "",
          consumeraddress: "",
          disable: false
        });
        this.tableData3.forEach(element => {
          tableDataTemp.push(element);
        });
        this.tableData3 = tableDataTemp;
      }
      if (item == 3) {
        tableDataTemp.push({
          dateStart: "",
          dateEnd: "",
          name: this.$store.state.user.truename,
          companyName: "",
          money: "",
          principalInterest: "",
          disable: false
        });
        this.tableData4.forEach(element => {
          tableDataTemp.push(element);
        });
        this.tableData4 = tableDataTemp;
      }
      if (item == 4) {
        tableDataTemp.push({
          dateStart: "",
          dateEnd: "",
          name: this.$store.state.user.truename,
          bankname: "",
          liabilitiesmoney: "",
          liabilitiestotal: "",
          disable: false
        });
        this.tableData5.forEach(element => {
          tableDataTemp.push(element);
        });
        this.tableData5 = tableDataTemp;
      }
    }
  }
};
</script>
<style scoped>
/*! autoprefixer: off */
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-badge__content {
  background-color: #fff;
}
.el-button.is-round {
  margin-left: 0%;
  margin-top: 1%;
}
.el-main {
  text-align: left;
  line-height: 20px;
}

.el-button.is-round {
  margin-left: -92%;
  margin-top: 1%;
}
.paneButton {
  margin-left: -100%;
  margin-top: 0%;
}
.el-main {
  text-align: center;
  line-height: 20px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.imgSize {
  width: 40px;
  height: 40px;
  margin-left: -11px;
  margin-top: 10px;
}
.el-header {
  background-color: #dadada;
  color: #333;
  text-align: left;
  line-height: 60px;
}
.words {
  position: absolute;
  top: 7px;
  left: 60px;
  font-size: 20px;
  color: blue;
  font-family: courier;
}
.el-row {
  margin-bottom: 20px;
  width: 100%;
}
.el-aside {
  line-height: 200px;
}

.el-col-12 {
  width: 100%;
}

.el-main {
  text-align: center;
  line-height: 16px;
}

body > .el-container {
  margin-bottom: 40px;
  height: 1080px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
  position: absolute;
  right: -1%;
  top: 0px;
}
.item2 {
  margin-top: 10px;
  margin-right: 100px;
  position: absolute;
  right: 1%;
  top: 0px;
}
.myswith {
  position: absolute;
  right: 5%;
}

.el-tabs__content {
  margin-top: -10%;
}
.zhongyaoshijian {
  width: 99%;
  height: 50%;
  left: 1%;
 float: left;
  text-align: left;
  font-weight:bold;
}
.isimportant{
    position: absolute;
    left: 0%;
}
.beatifulcolor{
  float: left;
  width:1%;
  height: 50px;
  
 
}
.thistotal{
   position: relative;
}
/* autoprefixer: on */
</style>